import React, { useEffect, useState } from "react";
import { Steps } from "antd-mobile";

// interface
import type { IProps } from "./index.d";
import { IUserList, queryUserListController } from "./service";
//style
import "./index.less";

const Step = Steps.Step;

const ProcessInstanceListStep: React.FC<IProps> = ({
  processInstancesList,
  isFinish = false,
}) => {
  console.log(processInstancesList, "processInstancesList");
  const [userList, setUserList] = useState<IUserList>({});
  //@ts-ignore
  useEffect(async () => {
    setUserList(await queryUserListController());
  }, []);
  return (
    <div className="processInstanceListStep">
      <Steps direction="vertical">
        <Step
          status="finish"
          title={
            <div className="title_1" style={{ color: "#1677ff" }}>
              开始
            </div>
          }
        ></Step>
        {processInstancesList.map((item,index) => {
            console.log(item,'item')
            console.log(userList)
          return   <Step
          key={index}
          title={
            <div className="steps">
              <div className="title_1" style={{ color: "#1677ff" }}>
                
                {item.name}【
                {item.commentList.length == 0
                              ? "处理中"
                              : item.commentList[0].message}
                】
              </div>
            </div>
          }
          status="finish"
          description={
            <div className="item1">
              <div>
                <span>处理时间：</span>
                {item?.commentList?.[0]?.time || ""}
              </div>
              <div>
                <span>处理人：</span>
                {userList[(item.commentList.length?item?.commentList?.[0]?.userId : item.assignee)]?.name || ""}
              </div>
              <div>
                <span>办理意见：</span>
                {item.commentList[0]?.fullMessage}
              </div>
            </div>
          }
        />;
        })}
      
        <Step
          status={isFinish ? "finish" : "wait"}
          key={3}
          title={<div className="title_1">结束</div>}
        ></Step>
      </Steps>
    </div>
  );
};

export default ProcessInstanceListStep;
